<!--
 * @Author: jiu yin
 * @Date: 2024-04-11 14:04:23
 * @LastEditTime: 2024-04-17 13:16:48
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \web-smart-tour\src\components\is_login_popup\index.vue
 * jiu
-->
<template>
   <view>
      <uni-popup ref="is_login_popup1" background-color="#fff" borderRadius="32rpx 32rpx 0 0" @maskClick="maskClick">
         <view class="border_is_login_popup bg-#fff p-36rpx">
            <view class="mb-24rpx">
               <image class="w-76rpx h-76rpx mr-16rpx" src="../../static/images/logo.png" />
            </view>
            <view class="font-size-32rpx mb-20rpx fw-500 flex flex-items-center">
               欢迎使用云梦智慧游
            </view>
            <view class="font-size-28rpx mb-64rpx fw-400 c-#666">登录后获取更多使用权限</view>
            <!--  -->
            <u-button
               class="h-88rpx border-r-66rpx"
               :open-type="isAgree && !is_login_disabled ? 'getPhoneNumber' : 'primary'"
               shape="circle"
               @getphonenumber="handleLogin"
               @click="handlePopup"
               :disabled="is_login_disabled"
               color="linear-gradient(-90deg, #0FBCD6 0%, #0CCA91 100%)"
            >手机号一键登录</u-button>
            <view class="text-center mt-40rpx mb-64rpx font-size-30rpx c-#666" @click="goBack">先逛逛</view>
            <view class="radio font-size-26rpx c-#666 flex">
               <checkbox-group @change="handleAgree">
                  <checkbox style="transform:scale(0.7)" color="#0CCA92" value="a" :checked="isAgree" />
               </checkbox-group>
               <view>
                  允许我们在必要场景下，合理使用您的个人信息，且阅读并同意
                  <text class="c-#0CCA92">
                     <text @click="handleType('user_protocol')">《使用条款》</text>
                     、<text @click="handleType('privacy_policy')">《隐私政策》</text></text>
                  等内容
               </view>
            </view>
         </view>
      </uni-popup>

      <uni-popup ref="useShow" type="center" background-color="#fff">
			<view class="personal-use">
				<view class="use-title">
					{{ treatyType == 'user_protocol' ? '云梦智慧游使用条款' : '云梦智慧游隐私政策'}}
				</view>
				<view class="use-con">
					<rich-text :nodes="infoText"></rich-text>
				</view>
			</view>
		</uni-popup>
   </view>
   

</template>

<script>
import { switchTab } from "@/hooks";
import { getPhone } from "@/utils/index.js";
import { treatyInfo } from '@/api/home.js';
import store from "@/store";

export default {

   data() {
      return {
         isAgree: false,
         treatyType: "",
			infoText: "",
      }
   },
   computed: {
      is_login_popup() {
         return this.$store.getters.is_login_popup
      },
      is_login_disabled() {
         return this.$store.getters.is_login_disabled
      },
   },
   watch: {
      is_login_popup(newValue, oldValue) {
         if (newValue === oldValue) return;
         newValue ? this.open() : this.close();
      }
   },
   methods: {
      open() {
         this.$refs.is_login_popup1.open('bottom')
      },
      close() {
         this.$refs.is_login_popup1.close()
         this.isDisabled = false;
      },
      goBack() {
         store.commit("userInfo/set_is_login_popup", false);
         setTimeout(() => {
            switchTab('/pages/home/index')
         }, 300)
      },
      maskClick() {
         store.commit("userInfo/set_is_login_popup", false);
      },
      handleLogin(e) {
         store.commit("userInfo/set_is_login_disabled", true);
         getPhone(e, '1123');
      },
      handleAgree(e) {
         if (e.target.value.length > 0) {
            this.isAgree = true;
         } else {
            this.isAgree = false;
         }
      },
      handleType(type) {
         this.treatyType = type;
         treatyInfo({type: type}).then(res => {
				if (res.code == 200) {
               this.$refs.useShow.open("center");
					this.infoText = res.data.content;
				}
			})
      },
      handlePopup() {
         if (!this.isAgree) {
            uni.showToast({
               title: '请阅读并同意协议',
               icon: 'none',
            });
         }
      }
   }
}
</script>


<style lang="scss">
.border_is_login_popup {
   border-radius: 116rpx 116rpx 0 0;
}
.personal-use {
	width: 85%;
	margin: 0 auto;
	padding: 20rpx;
	position: relative;
	font-weight: 400;
	font-size: 28rpx;
	color: #666666;
	background-color: #fff;
	background-image: url("../../static/images/popup-bg.png");
	background-size: 100% 160rpx;
	background-repeat: no-repeat;
	border-radius: 32rpx;
	
	.use-title {
		margin-bottom: 24rpx;
		text-align: center;
		font-weight: 700;
		font-size: 32rpx;
		color: #3D3D3D;
	}
	.use-con {
		height: 800rpx;
		overflow-y: scroll;
	}
}
</style>
